<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color:#f00;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>简易计算器</h1>
    <hr>

    参数1: <input type="text" id="num1"> 
    参数2: <input type="text" id="num2"> <br>

    <button onclick="sum(1)">➕</button>
    <button onclick="sum(2)">➖</button>
    <button onclick="sum(3)">÷</button>
    <button onclick="sum(4)">×</button>

    <hr>
    <div id="box">暂无结果</div>

    <script>

        function sum(m) {
            // 各种获取
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
            var box = document.getElementById('box');

            // console.log(num1, num2);

            // 执行数据转换
            num1 = Number(num1);
            num2 = Number(num2);

            // 判断用户输入合法性
            if (isNaN(num1)) {
                alert('参数1 不是一个数值!');
                return;
            }
            if (isNaN(num2)) {
                alert('参数2 不是一个数值!');
                return;
            }

            // 执行运算
            // var result = num1 + num2;
            // console.log(typeof(num1));
            switch (m) {
                case 1: var result = num1 + num2;break;
                case 2: var result = num1 - num2;break;
                case 3: 
                    if (num2 == 0) {
                        alert('参数2 不能为零!');
                        return;
                    }
                    var result = num1 / num2;
                    break;
                case 4: var result = num1 * num2;break;
            }
            // 输出到指定位置
            box.innerHTML = result.toFixed(2);
        }

    
    </script>
</body>
</html>